<template>
  <div>
    <div>
      <el-page-header @back="$router.go(-1)">
      </el-page-header>
    </div>
    <div style="display: flex; justify-content: space-around; margin-top: 20px;">
      <div>
        <el-card>
          <div id="chart1" style="height: 300px; width: 400px;">
          </div>
          <div style="text-align: center; margin-top: 40px; font-size: 20px;">课程不同类别平均分柱形统计图</div>
        </el-card>
      </div>
      <div>
        <el-card>
          <div style="text-align: center; margin-bottom: 5px; font-size: 20px;">课程不同类别平均分柱形统计图</div>
          <div id="chart2" style="height: 450px; width: 400px;">
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { Column } from '@antv/g2plot';
import { get } from '@/utils/request'
import { Radar } from '@antv/g2plot';
export default {
  data() {
    return {
      data1: [],
      data2: []
    }
  },
  methods: {
    async getChart1() {
      console.log(this.$route.query.id);
      let res = await get('/review/ratings', { id: this.$route.query.id })
      this.data1 = res.data.list
      this.data2 = res.data.list
      console.log(this.data1);
    },
    loadColumn() {
      console.log(this.data1);

      const columnPlot = new Column('chart1', {
        data: this.data1,
        xField: 'type',
        yField: 'avg_rating',
        label: {
          // 可手动配置 label 数据标签位置
          position: 'middle', // 'top', 'bottom', 'middle',
          // 配置样式
          style: {
            fill: '#FFFFFF',
            opacity: 0.6,
          },
        },
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
          },
        },
        meta: {
          type: {
            alias: '评分类别',
          },
          avg_rating: {
            alias: '平均得分',
          },
        }

      });
      columnPlot.render();
    },
    loadRadar() {
      const radarPlot = new Radar('chart2', {
        data: this.data2.map((d) => ({ ...d, star: Math.sqrt(d.star) })),
        xField: 'type',
        yField: 'avg_rating',
        meta: {
          star: {
            min: 0,
            nice: true,
          },
        },
        area: {},
      });
      radarPlot.render();
    }
  },
  async mounted() {
    await this.getChart1();
    this.loadColumn();
    this.loadRadar()
  },
}
</script>
